<!-- <template>
    <div class="LeftListOnecpm">
        <h1>aaaaaaaaaa</h1>
        <h3>你好你好你好</h3>
      <p>你好</p>
    </div>
</template> -->


<template>
  <form>
    <div v-for="index in 10" :key="index" class="option" ref="options" @click="handleOptionClick(index)">
      <input type="radio" name="hopping" :value="index" v-model="selectedOption" />
      <label :for="`option-${index}`"><span></span>{{ index }}</label>
    </div>
    <div class="worm" :style="{ top: wormTop }">
      <div class="worm__segment" v-for="index in 30" :key="index"></div>
    </div>
  </form>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const selectedOption = ref(1);
const wormTop = ref('0px');
const options = ref([]);

const handleOptionClick = (index) => {
  selectedOption.value = index;
  moveWorm();
};

const moveWorm = () => {
  const optionRef = options.value[selectedOption.value - 1];
  if (optionRef) {
    const optionRect = optionRef.getBoundingClientRect();
    wormTop.value = `${optionRect.top + window.scrollY}px`;
  }
};

onMounted(() => {
  options.value = Array.from(document.querySelectorAll('.option'));
});
</script>

<style scoped lang="scss">
$wormDur: 0.4s;
$radioDur: 0.2s;
$timing1: cubic-bezier(0.45, 0.05, 0.55, 0.95);
$timing2: cubic-bezier(0.5, 0, 0.5, 2);
$radios: 10; // 修改为10

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-size: calc(32px + (40 - 32) * (100vw - 320px) / (1024 - 320));
}

body {
  background: #e3e4e8;
  color: #17181c;
  display: flex;
  font: 1em Hind, sans-serif;
  height: 100vh;
  line-height: 1.5;
  padding: 1.5em 0;
}

form {
  display: block;
  margin: auto;
  max-width: 10em;
  position: relative;
}

.option {
  position: relative;
  margin-bottom: 1.5em;
}

input {
  position: fixed;
  top: -1.5em;
  left: -1.5em;
  opacity: 0;
}

label {
  $shadowColor: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: block;
  font-weight: bold;
  text-shadow: 0 0.1em 0.1em $shadowColor;
  transition: color $radioDur $timing1;
  &:not(:last-of-type) {
    margin-bottom: 1.5em;
  }
  span {
    box-shadow: 0 0 0 0.2em currentColor inset, 0 0.2em 0.2em $shadowColor, 0 0.3em 0.2em $shadowColor inset;
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: bottom;
    width: 1.5em;
    height: 1.5em;
    transition: transform $radioDur $timing2, box-shadow $radioDur $timing1, color $radioDur $timing1;
  }
}

label span,
.worm__segment:before {
  border-radius: 50%;
}

input:checked + label,
input:checked + label span,
.worm__segment:before {
  color: #255ff4;
}

input:checked + label {
  &, span {
    transition-delay: $wormDur;
  }
  span {
    transform: scale(1.2);
  }
}

.worm {
  position: fixed;
  left: 0.375em;
  width: 0.75em;
  transition: top $wormDur $timing1;
}

.worm__segment {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  &:before {
    animation-duration: $wormDur;
    animation-timing-function: $timing1;
    background: currentColor;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
  }
  &:first-child, &:last-child {
    &:before {
      box-shadow: 0 0 1em 0 currentColor;
    }
  }
}

@for $s from 2 through 30 {
  $delay: $wormDur / 100 * ($s - 1);
  .worm__segment:nth-child(#{$s}) {
    transition-delay: $delay;
    &:before {
      animation-delay: $delay;
    }
  }
}

@for $s from 1 through $radios {
  input:nth-of-type(#{$s}):checked ~ .worm .worm__segment {
    @if $s > 1 {
      transform: translateY(3em * ($s - 1));
    }
    &:before {
      animation-name: hop#{$s};
    }
  }

  @keyframes hop#{$s} {
    from, to {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-1.5em);
    }
  }
}

@media screen and (prefers-color-scheme: dark) {
  body {
    background: #17181c;
    color: #e3e4e8;
  }

  input:checked + label,
  input:checked + label span,
  .worm__segment:before {
    color: #5583f6;
  }
}
</style>
